import ApiFinance from "@/api/finance"
import Moment from "@/components/app/Moment"
import PopupContainer from "@/components/app/PopupContainer"
import Page from "@/components/common/Page"
import ByIcon from "@/components/ui/ByIcon"
import BySearchBar from "@/components/ui/BySearchBar"
import useList from "@/hooks/useList"
import { PageContainer, Text, View } from "@tarojs/components"
import { useResetState } from "ahooks"


const PopupDetail = ({ id,onCancel }) => {

  const { list } = useList<any>(ApiFinance.workerQuantityGoldDetail, { defaultParams: [{ tagetUserId: id }] })

  return (
    <PopupContainer title="质保金明细" onCancel={onCancel}>

      {
        list.map((item) => (
          <View className="p-3 mx-4 mb-4 shadow-black-1 bg-white rounded-xl" key={item.quantityBillId}>
            <View className="flex items-center justify-between">
              <Text className="font-bold">￥{item.quantityAmount}</Text>
              <Text className="text-sm text-third">
                <Moment value={item.createDate} />
              </Text>
            </View>

            <View className="m-1 flex items-center justify-between">
              <Text className="text-lg">{item.customerName}</Text>
              <Text className="text-third">{item.address}</Text>
            </View>
          </View>
        ))
      }


    </PopupContainer>
  )
}

export default () => {

  const { list, resetToFirst } = useList<any>(ApiFinance.workerQuantityGoldList,)
  const [selected, set, reset] = useResetState<any>(undefined)

  return (
    <>
      <Page slotHeader={
        <View className="flex items-center p-3 bg-white">
          <BySearchBar className="flex-auto" placeholder="请输入搜索内容" onConfirm={e => (resetToFirst({ tagetUserName: e }))} />
        </View>
      }>

        {
          list.map((item) => (
            <View className="flex items-center mx-4 my-2 bg-white rounded-lg p-3 shadow-black-1"
              key={item.tagetUserId}
              onClick={() => set(item.tagetUserId)}>

              <View className="flex-auto">
                <View className="text-lg">{item.tagetUserName}</View>
                <View className="text-third text-xs">{item.workerType}</View>
              </View>

              <Text className="pr-2">￥{item.totalAmount}</Text>

              <ByIcon name="ArrowRight" />
            </View>
          ))
        }
      </Page>

      <PageContainer round show={!!selected} onAfterLeave={reset}>
        {selected && <PopupDetail id={selected} onCancel={reset} />}
      </PageContainer>
    </>
  )

}
